<script setup>
import { onMounted, ref, computed } from "vue";
import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
  ElDatePicker,
  ElRow,
  ElCol,
} from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { useTaxStore } from "../../stores/tax/taxStore";

// 初始化路由
const router = useRouter();

// 获取当前路由信息
const route = useRoute();

// 获取 store 中的 taxData
const taxStore = useTaxStore();

// 从查询参数中获取 id
const taxId = route.query.id;

// 获取税务数据
const taxData = computed(() => taxStore.taxData);

// 初始化 taxPlanForm
const taxPlanForm = ref({
  companyName: "",
  recordName: "",
  taxForm: "",
  taxDate: "",
  taxMoney: "",
  remark: "",
});

// 保存税务计划并更新 store
const handleAddTaxPlan = () => {
  const taxDateFormatted = formatDate(new Date(taxPlanForm.value.taxDate));

  if (taxId === "new") {
    // 新增税务计划
    taxStore.addTaxRecord({
      id: Date.now(),
      companyName: taxPlanForm.value.companyName,
      recordName: taxPlanForm.value.recordName,
      taxForm: taxPlanForm.value.taxForm,
      taxDate: taxDateFormatted,
      taxMoney: taxPlanForm.value.taxMoney,
      status: "未申报",
      remark: taxPlanForm.value.remark,
    });
  } else if (taxId) {
    // 更新已有的税务计划
    taxStore.updateTaxRecord(taxId, {
      companyName: taxPlanForm.value.companyName,
      recordName: taxPlanForm.value.recordName,
      taxForm: taxPlanForm.value.taxForm,
      taxDate: taxDateFormatted,
      taxMoney: taxPlanForm.value.taxMoney,
      remark: taxPlanForm.value.remark,
    });
  }

  // 跳转回税务列表页
  router.push({ path: "/financial/tax" });
};

// 退出添加页面
const handleExitTaxPlan = () => {
  router.push({ path: "/financial/tax" });
};

const formatDate = (date) => {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  return `${year}-${month}-${day}`;
};

// 根据 id 查找对应的税务计划并初始化表单
onMounted(() => {
  if (taxId && taxId !== "new") {
    const selectedPlan = taxData.value.find((item) => item.id == taxId);
    if (selectedPlan) {
      taxPlanForm.value = { ...selectedPlan };
    }
  }
});
</script>

<template>
  <div class="tax-plan-container">
    <section class="section">
      <el-row class="section-header">
        <el-col :span="20">
          <h1>添加税务申报计划</h1>
        </el-col>
      </el-row>

      <el-form :model="taxPlanForm" label-width="120px" class="tax-plan-form">
        <el-form-item label="公司名称">
          <el-input
            v-model="taxPlanForm.companyName"
            placeholder="请输入公司名称"
          />
        </el-form-item>

        <el-form-item label="记录名称">
          <el-input
            v-model="taxPlanForm.recordName"
            placeholder="请输入记录名称"
          />
        </el-form-item>

        <el-form-item label="税务类型">
          <el-select v-model="taxPlanForm.taxForm" placeholder="请选择税务类型">
            <el-option label="增值税" value="增值税"></el-option>
            <el-option label="企业所得税" value="企业所得税"></el-option>
            <el-option label="个人所得税" value="个人所得税"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="申报时间">
          <el-date-picker
            v-model="taxPlanForm.taxDate"
            type="date"
            placeholder="Pick a day"
          />
        </el-form-item>

        <el-form-item label="申报金额">
          <el-input
            v-model="taxPlanForm.taxMoney"
            placeholder="请输入申报金额"
            type="number"
          />
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="taxPlanForm.remark"
            placeholder="填写备注（如适用）"
            :rows="4"
          />
        </el-form-item>

        <div class="button-wrap">
          <el-button
            type="primary"
            @click="handleAddTaxPlan"
            class="btn-add-tax-plan"
            >保存</el-button
          >
          <el-button
            type="info"
            @click="handleExitTaxPlan"
            class="btn-exit-tax-plan"
            >退出</el-button
          >
        </div>
      </el-form>
    </section>
  </div>
</template>

<style scoped>
.section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.tax-plan-container {
  padding: 20px;
}

.section-header {
  margin-bottom: 20px;
}

.tax-plan-form {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.button-wrap {
  display: flex;
  justify-content: center; /* 水平居中对齐按钮 */
  gap: 10px; /* 按钮之间的间距 */

  .btn-add-tax-plan,
  .btn-exit-tax-plan {
    width: 70px;
  }
}

.el-row {
  margin-bottom: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input,
.el-select,
.el-date-picker {
  width: 100%;
}
</style>
